<template>
  <div class="header">
    <div class="header-left">
      <!-- <RouterLink to="/">
        <img style="width: 50px;" class="router-logo" src="/static/imgs/logo.png" alt="logo" />
      </RouterLink> -->
      <RouterLink to="/"><strong class="title" style="color: black; display: block; white-space: nowrap;">Wu Lab</strong></RouterLink>
    </div>
    <div class="header-right">
      <div v-if="isMobile">
        <el-dropdown class="menu-icon" ref="dropdown" >
          <el-button>
            <el-icon><Operation /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <RouterLink class="router-item" to="/" @click="closeDropdown">Home</RouterLink>
              </el-dropdown-item>
              <el-dropdown-item>
                <RouterLink class="router-item" to="/publication" @click="closeDropdown">Publication</RouterLink>
              </el-dropdown-item>
              <el-dropdown-item>
                <RouterLink class="router-item" to="/software" @click="closeDropdown">Software</RouterLink>
              </el-dropdown-item>
              <el-dropdown-item>
                <RouterLink class="router-item" to="/membership" @click="closeDropdown">Membership</RouterLink>
              </el-dropdown-item>
              <el-dropdown-item>
                <RouterLink class="router-item" to="/education" @click="closeDropdown">Education</RouterLink>
              </el-dropdown-item>
              <el-dropdown-item>
                <RouterLink class="router-item" to="/news" @click="closeDropdown">News</RouterLink>
              </el-dropdown-item>
              <el-dropdown-item>
                <RouterLink class="router-item" to="/contact" @click="closeDropdown">Contact</RouterLink>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div v-if="!isMobile">
        <div class="routers">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#F5F5F5"
            style="width: 100%; margin-right: 10%;"
            :ellipsis="false"
            @select="handleSelect"
          >
            <el-menu-item class="router-item" index="/">
              <RouterLink to="/">Home</RouterLink>
            </el-menu-item>
            <el-menu-item class="router-item" index="/publication">
              <RouterLink to="/publication">Publication</RouterLink>
            </el-menu-item>
            <el-menu-item class="router-item" index="/software">
              <RouterLink to="/software">Software</RouterLink>
            </el-menu-item>
            <el-menu-item class="router-item" index="/membership">
              <RouterLink to="/membership">Membership</RouterLink>
            </el-menu-item>
            <el-menu-item class="router-item" index="/education">
              <RouterLink to="/education">Education</RouterLink>
            </el-menu-item>
            <el-menu-item class="router-item" index="/news">
              <RouterLink to="/news">News</RouterLink>
            </el-menu-item>
            <el-menu-item class="router-item" index="/contact">
              <RouterLink to="/contact">Contact</RouterLink>
            </el-menu-item>
          </el-menu>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <RouterView />
    <el-backtop :right="100" :bottom="100" style="background: beige" v-if="!isMobile" />
  </div>
  <el-divider style="width: 80%; margin: 20px 10%"></el-divider>
  <el-footer>
    <div class="footer-container">
      <div class="rights">
        <div class="rights-logo"><strong>Wu Lab</strong></div>
        <div class="rights-text">
          Copyright &copy; {{ new Date().getFullYear() }}. All rights reserved.
        </div>
      </div>
      <div class="address">
        Address：1/F, 12 Building, 8 Life Park Road, ZGC Life Science Park, Changping District
      </div>
    </div>
  </el-footer>
</template>

<script setup>
  import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
  import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
  import _ from 'lodash'

  const route = useRoute()
  const router = useRouter()
  let isMobile = ref(window.innerWidth <= 768)
  let activeIndex = ref(route.path || '/')
  let dropdown = ref()

  // 监控 route.path 的变化
  watch(() => route.path, (newPath) => {
    nextTick(() => {
      activeIndex.value = newPath
    })
  })

  const resize = window.addEventListener('resize', _.debounce(() => {
    isMobile.value = window.innerWidth <= 768
  }, 300))

  const handleSelect = (key) => {
    router.push(key)
  }

  function closeDropdown() {
    dropdown.value.handleClose()
  }

  onMounted(() => {
    resize
  })

  onUnmounted(() => {
    window.removeEventListener('resize', resize)
  })
</script>

  <style lang="scss" scoped>
    body {
      margin: 0  !important;
      padding: 0;
    }


    .header {
        width: 100%;
        display: flex;
        font-size: 25px;
        line-height: 70px;
        justify-content: space-between;
        align-items: center;
        background-color: #F5F5F5;
        position: sticky;
        top: 0px;
        z-index: 99;
    }



    .header-left {
      width: 100%;
      margin-left: 10%;
      display: block;
      align-items: center;
    }

    .header-right {
      width: 100%;
      margin-right: 10%;
    }


    .container {
      width: 80%;
      margin: auto;
    }

    .menu-icon {
      margin: 20px;
    }

    .logo {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .title {
      font-family: 'Open Sans'
    }

    a {
      text-decoration: none;
    }

    .routers {
      width: 100%;
      margin-right: 10%;
    }

    .router-logo {
      margin-right: 20px;
      vertical-align: middle;
    }

    .router-item {
      font-size: large;
      font-family: 'Open Sans';
      a {
        font-weight: 800;
      }
    }


    .footer-container {
      width: 80%;
      display: flex;
      margin: auto;
      justify-content: space-between;
      text-align: center;
    }

    .rights {
      display: flex;
      margin-left: 20px;
      padding-right: 20px;
      margin-right: 5%;
      align-items: center;
    }
    .rights div {
      margin-right: 10px;
    }

    .rights-logo {
      font-family: Playfair;
      font-size: larger;
    }

    .rights-text {
      font-size: small;
    }

    .address {
      font-size: small;
    }

    @media screen and (max-width: 768px) {
      .container {
        width: 100%;
      }


      .header-left {
        width: 100%;
        margin-left: 10%;
        display: block;
      }
      
      .header-right {
        width: 20%;
        margin-right: 10px;
        display: block;
      }

      .footer-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: auto;
        justify-content: space-between;

        .rights {
          width: 100%;
          display: flex;
          flex-direction: column;
          margin: auto;
          justify-content: space-between;
        }
      }
    }
  </style>
